<template>
  <!-- 体质管理 -->
  <div class="box">
    <!-- 筛选 -->
    <div class="screen">
      <el-select v-model="gradeValue" placeholder="全部年级" clearable @change="changeGrade">
        <el-option
          v-for="item in gradeIds"
          :key="item.id"
          :label="item.gradeName"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 列表 -->
    <div class="listTab">
      <div class="listHeader">
        <div>
          当前结果:
          <span>总计 {{ total }} 条记录</span>
        </div>
        <el-select v-model="customValue" class="zidingyi" clearable placeholder="自定义显示列">
          <el-option
            v-for="item in custom"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="listBody">
        <el-table
          stripe
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          v-loading="loading"
        >
          <el-table-column prop="name" label="项目" min-width="15%">
          </el-table-column>
          <el-table-column prop="sex" label="适应性别" min-width="15%">
          </el-table-column>
          <el-table-column prop="targetName" label="指标" min-width="30%">
            <!-- <template slot-scope="scope">
              {{ scope.row.gradeName }}
            </template> -->
          </el-table-column>
          <el-table-column prop="gradeIds" label="适应年级" min-width="30%">
            <template slot-scope="scope">
              {{ scope.row.gradeName }}
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作" min-width="15%">
            <template slot-scope="scope">
              <el-select
                v-model="operVal"
                @change="changeVal(scope.row.id)"
                placeholder="操作"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 添加图标 -->
    <div
      class="add_icon"
      @click="$router.push({ path: '/sys-bill', query: { type: 0 } })"
    >
      <img src="../../../static/img/icon_hdglfbhd@2x.png" alt="" />
    </div>
  </div>
</template>

<script>
import { tizhitext, delete_tizi, getAllGardas } from '@/api/index'
export default {
  data() {
    return {
      custom: [],
      operVal: '',
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '修改'
      }],
      // 全部年级
      gradeIds: [], // 年级
      gradeValue: '',
      customValue: [],
      tableData: [],
      // 总条数
      total: 0,
      // 每页多少条
      pageSize: 8,
      //页码
      page: 0,
      // 数据加载时
      loading: true,
    }
  },

  created() {
    this.onLoad();
    this.getGarda()
  },
  methods: {
    // 获取年级列表
    async getGarda() {
      const data = {
        orgId: JSON.parse(sessionStorage.getItem('userMsg')).orgCode,
        gradeType: JSON.parse(localStorage.getItem('gradeType'))
      }
      const res = await getAllGardas(data)
      console.log('年级:', res);
      this.gradeIds = res.data.data
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    changeGrade(value) {
      console.log('所选年级', value);
      this.gradeValue = value
      this.onLoad()
    },
    // 获取体质管理数据
    // 教师-首页课程列表
    async onLoad() {
      const queryParam = JSON.parse(sessionStorage.getItem('userMsg'))
      var data = {
        orgId: queryParam.orgCode, //项目id
        pageNo: this.page, //页码
        pageSize: this.pageSize, //页含量
        gradeId: this.gradeValue
      };
      const res = await tizhitext(data)
      console.log('体质列表', res);
      if (res.status === 200) {

        console.log(this.tableData);
        var arr = res.data.data.list;

        for (let i = 0; i < arr.length; i++) {

          var gradeNameText = [];  //适应年级数组
          var sexs = [];  //适应性别
          var targetNameText = []; // 指标

          for (let j in arr[i].ruleList) {
            // ---------年级
            var gradeText = arr[i].ruleList[j].gradeName
            if (gradeNameText.indexOf(gradeText) == -1) {
              gradeNameText.push(gradeText)
            } else if (gradeText == '') {
              return gradeNameText
            } else {
            }
            arr[i].gradeName = gradeNameText.join('、');  //拼接的完全的适应年纪
            // ---------性别
            var sexText = arr[i].ruleList[j].sex
            if (sexText == 0) {
              sexText = '全部'
            } else if (sexText == 1) {
              sexText = '男'
            } else if (sexText == 2) {
              sexText = '女'
            } else if (sexText == null) {
              sexText = ''
            } else {
              sexText = sexText
            }
            if (sexs.indexOf(sexText) == -1) {
              sexs.push(sexText)
            } else if (sexText == '') {
              return sexs
            } else {
            }
            arr[i].sex = sexs.join('、')   //拼接的完全的适应性别
          }
          for (const c in arr[i].targetList) {
            // 指标
            var targetText = arr[i].targetList[c].dictValue
            if (targetNameText.indexOf(targetText) == -1) {
              targetNameText.push(targetText)
            } else if (targetText == '') {
              return targetNameText
            } else {
            }
            arr[i].targetName = targetNameText.join('、');  //拼接的完全的适应年纪
          }
        }
        console.log('dasdsdkkekekeekek', arr);
        this.tableData = arr
        this.total = res.data.data.total;
        this.loading = false
      }
    },
    // 删除体质
    async delete_list(id) {
      const queryParam = JSON.parse(sessionStorage.getItem('userMsg'))
      var data = {
        "orgId": queryParam.orgCode, //项目id
        "physicalId": id, //体质id
      };
      const res = await delete_tizi(data)
      console.log('删除信息', res);
      if (res.data.errorCode == 0) {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        setTimeout(() => {
          this.onLoad();
        }, 1000);
      } else {
        this.$message({
          type: 'error',
          message: '删除失败!'
        });
      }
    },
    // 操作
    changeVal(id) {
      if (this.operVal == 1) {
        // 删除
        this.$confirm('此操作将删除该体质项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 根据id删除体质项
          this.delete_list(id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        this.operVal = ''
      } else {
        // 修改
        this.operVal = '';
        this.$router.push({ path: '/constitution_details', query: { 'physicalId': id, type: 1 } })
      }
      console.log('体质id', id, this.operVal)
    },
    // 分页函数
    changePage(newPage) {
      this.page = newPage; //页码
      console.log(newPage);
      this.onLoad()
    }
  },
  watch: {
    $route(val) {
      this.onLoad()
    }
  }
}
</script>

<style lang="scss" scoped>
.zidingyi {
  /deep/ .el-input__inner,
  /deep/.el-input .el-input__count .el-input__count-inner {
    background-color: #f7fbfc;
    line-height: 0.2188rem;
    width: 0.9396rem !important;
    border-radius: 0.0521rem;
  }
  /deep/.el-input--medium .el-input__icon {
    line-height: 0.1875rem;
  }
}
/deep/.el-table th {
  font-size: 0.0938rem;
}
/deep/ .el-select .el-input .el-select__caret {
  font-size: 0.1rem;
}
.box {
  background-color: #fff;
  border: none;
  position: relative;
  padding: 0.1667rem 0.1406rem;
  border-radius: 0.0781rem;
  .screen {
    display: flex;
    padding-bottom: 0.1094rem;
    border-bottom: 0.0052rem #d8f9ed solid;
    .el-select {
      margin-right: 0.1042rem;
    }
    /deep/.el-input--medium .el-input__inner,
    .el-input--suffix .el-input__inner,
    .el-select .el-input__inner {
      background-color: #f7fbfc;
      height: 0.2188rem;
      width: 0.7396rem;
      border-radius: 0.0521rem;
    }
    /deep/.el-input--medium .el-input__icon {
      line-height: 0.1875rem;
    }
  }
  .listTab {
    .listHeader {
      margin: 0.125rem 0 0.1198rem 0.1042rem;
      display: flex;
      justify-content: space-between;
      div {
        font-size: 0.0729rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #525252;
        line-height: 0.1875rem;
        span {
          color: #888888;
        }
      }
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        background-color: #f7fbfc;
        height: 0.1875rem;
        width: 0.7031rem;
        border-radius: 0.0521rem;
        font-size: 0.0729rem;
      }
    }
    .el-table {
      padding-bottom: 1px;
      /deep/.el-table__body-wrapper tr td{
        border: 1px solid transparent;
        border-right: none;
        border-left: none;
      }
      /deep/.el-table__body-wrapper tr td:first-child {
        border: 1px solid transparent;
        border-right: none;
      }
      /deep/.el-table__body-wrapper tr td:last-child {
        border: 1px solid transparent;
        border-left: none;
      }
      /deep/.el-table__body-wrapper tr:hover td {
        border: 1px solid #8ee7d1;
        border-right: none;
        border-left: none;
        box-sizing: border-box;
      }
      /deep/.el-table__body-wrapper tr:hover td:first-child {
        border: 1px solid #8ee7d1;
        border-right: none;
      }
      /deep/.el-table__body-wrapper tr:hover td:last-child {
        border: 1px solid #8ee7d1;
        border-left: none;
      }
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        width: 0.4479rem;
        height: 0.1875rem;
        background: #f8f8f8;
        border-radius: 0.0938rem;
        padding: 0 0.1042rem 0 0.1302rem;
        color: #888888;
        font-size: 0.0729rem;
      }
      /deep/.el-input__suffix {
        display: none;
      }
    }
  }
  .add {
    position: fixed;
    right: 2%;
    bottom: 2%;
  }
}
</style>
